<template>
  <div>
    <el-table :data="tableData.affect" style="width: 100%">
      <el-table-column fixed prop="dname" label="影响范围/紧急度">
        <!-- <template #default="scope">
          <span>{{ scope.row.dname }}</span>
        </template> -->
      </el-table-column>
      <el-table-column v-for="item in tableData.urgency" :key="item.dcode" :label="item.dname">
        <template #default="scope">
          <span
            v-for="priorityItem in getPriorityItems(scope.row.dname, item.dname)"
            :key="priorityItem.priorityId"
            @click="openDrawer(scope.row.dcode, item.dcode)"
          >
            {{ priorityItem.priorityName === "" ? "请选择" : priorityItem.priorityName }}
          </span>
          <span v-if="!getPriorityItems(scope.row.dname, item.dname).length" @click="openDrawer(scope.row.dcode, item.dcode)">
            请选择
          </span>
        </template>
      </el-table-column>
    </el-table>
    <el-checkbox
      :v-model="iscCheck"
      @change="selectCheck"
      label="允许请求人和技术员覆盖已有的优先级矩阵,这将允许请求人或者技术员定义请求的优先级，而忽略全局的优先级矩阵的值"
    />
    <el-drawer v-model="drawer" title="选择优先级" :direction="direction" :before-close="handleClose">
      <el-select placeholder="请选择" v-model="selectValue" @change="updatepriorityMatrix">
        <el-option
          v-for="priorityItem in priorityData"
          :key="priorityItem.dcode"
          :label="priorityItem.dname"
          :value="priorityItem.dcode"
        ></el-option>
      </el-select>
    </el-drawer>
  </div>
</template>

<script lang="ts" setup name="prioritization">
import { ref, onMounted } from "vue";
import {
  getPriorityMatrix,
  getPriority,
  submitPriority,
  checkPriorityMatrixStatus,
  priorityMatrixStatus
} from "@/api/modules/dataDictionary";
import type { DrawerProps } from "element-plus";
onMounted(() => {
  getPriorityMatrixValue();
  getPriorityValue();
  checkPriorityMatrixStatusValue();
});
const tableData = ref<any>([]);
const priorityData = ref<any>([]);
const drawer = ref(false);
const direction = ref<DrawerProps["direction"]>("rtl");
const selectValue = ref("");
const affectId = ref("");
const urgencyId = ref("");
const iscCheck = ref(false);
const getPriorityMatrixValue = async () => {
  const data = await getPriorityMatrix();
  tableData.value = data;
  console.log(tableData.value);
};
const getPriorityValue = async () => {
  const data = await getPriority();
  priorityData.value = data;
};
const getPriorityItems = (affectName: string, urgencyName: string) => {
  return tableData.value?.priority.filter((p: any) => p.affectName === affectName && p.urgencyName === urgencyName) || [];
};
const checkPriorityMatrixStatusValue = async () => {
  const data = await checkPriorityMatrixStatus();
  if (data && typeof data === "object" && "priorityMatrixStatus" in data) {
    if (data?.priorityMatrixStatus === "true") {
      iscCheck.value = true;
    } else {
      iscCheck.value = false;
    }
  }
};
const handleClose = (done: any) => {
  drawer.value = false;
  done();
};
const openDrawer = (affectDcode: string, urgencyDcode: string) => {
  drawer.value = true;
  affectId.value = affectDcode;
  urgencyId.value = urgencyDcode;
};
const updatepriorityMatrix = async (value: any) => {
  const params = {
    "priorityMatrixDTO.urgencyId": urgencyId.value,
    "priorityMatrixDTO.affectId": affectId.value,
    "priorityMatrixDTO.priorityId": value
  };
  const data = await submitPriority(params);
  if (data === null) {
    drawer.value = false;
    selectValue.value = "";
    getPriorityMatrixValue();
  }
};
const selectCheck = async (e: any) => {
  const params = {
    "priorityMatrixStatusDTO.type": "priorityMatrixStatus",
    "priorityMatrixStatusDTO.priorityMatrixStatus": e
  };
  const data = await priorityMatrixStatus(params);
};
</script>
